<template>
    <view class="component-page">
        <view class="page-header">
            <view class="back-button" @click="backToHome">
                <text class="back-icon">←</text>
                <text>返回</text>
            </view>
            <text class="page-title">引导遮罩组件</text>
        </view>

        <!-- 演示区域 -->
        <view class="demo-section">
            <view class="section-title">功能演示</view>

            <view class="demo-container">
                <!-- 顶部导航 -->
                <view class="demo-header">
                    <navigator url="/" class="back-btn">返回</navigator>
                    <text class="header-title">引导遮罩组件</text>
                </view>

                <!-- 功能演示区域 -->
                <view class="demo-content">
                    <view class="feature-grid">
                        <view class="feature-item" id="message-center">
                            <text class="iconfont icon-message"></text>
                            <text>消息中心</text>
                        </view>
                        <view class="feature-item" id="notification-settings">
                            <text class="iconfont icon-settings"></text>
                            <text>通知设置</text>
                        </view>
                        <view class="feature-item" id="user-center">
                            <text class="iconfont icon-user"></text>
                            <text>个人中心</text>
                        </view>
                        <view class="feature-item" id="system-settings">
                            <text class="iconfont icon-system"></text>
                            <text>系统设置</text>
                        </view>
                    </view>

                    <!-- 控制按钮 -->
                    <view class="control-buttons">
                        <button @tap="startGuide" type="primary">开始引导</button>
                        <button @tap="resetGuide" type="default">重置引导</button>
                    </view>

                    <!-- 功能介绍 -->
                    <view class="feature-intro">
                        <view class="intro-title">功能特点</view>
                        <view class="intro-list">
                            <view class="intro-item">✨ 多步骤引导：支持多个步骤的引导流程</view>
                            <view class="intro-item">🎯 元素高亮：自动定位并高亮目标元素</view>
                            <view class="intro-item">💾 状态保存：记住用户的引导完成状态</view>
                            <view class="intro-item">🎨 样式自定义：支持自定义主题和样式</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 功能介绍 -->
        <view class="demo-section">
            <view class="section-title">功能介绍</view>
            <view class="feature-list">
                <view class="feature-item">
                    <view class="feature-icon">🎯</view>
                    <view class="feature-info">
                        <text class="feature-title">多步骤引导</text>
                        <text class="feature-desc">支持配置多个引导步骤，引导用户了解应用功能</text>
                    </view>
                </view>
                <view class="feature-item">
                    <view class="feature-icon">🔍</view>
                    <view class="feature-info">
                        <text class="feature-title">元素高亮</text>
                        <text class="feature-desc">自动高亮显示重要元素，帮助用户聚焦</text>
                    </view>
                </view>
                <view class="feature-item">
                    <view class="feature-icon">💾</view>
                    <view class="feature-info">
                        <text class="feature-title">状态保存</text>
                        <text class="feature-desc">自动记录引导完成状态，避免重复显示</text>
                    </view>
                </view>
                <view class="feature-item">
                    <view class="feature-icon">🎨</view>
                    <view class="feature-info">
                        <text class="feature-title">样式定制</text>
                        <text class="feature-desc">支持自定义样式、文本和行为</text>
                    </view>
                </view>
            </view>
        </view>

        <!-- 引导遮罩组件 -->
        <xl-guideoverlay v-model="showGuide" :step="currentStep" :steps="guideSteps" :highlight-style="highlightStyle"
            :bubble-offset="30" @finish="onFinish" :bubble-style="{
                backgroundColor: '#2C3E50', // 自定义半透明背景色
                textColor: '#ECF0F1',
                titleColor: '#FFFFFF',
                boxShadow: '0 8px 16px rgba(0, 0, 0, 0.2)'
            }" />
    </view>
</template>

<script setup>
import { ref } from 'vue';
import xlGuideoverlay from '@/components/xl-guideoverlay/index.vue';

// 控制引导显示状态
const showGuide = ref(false);
// 当前引导步骤
const currentStep = ref(0);
// 自定义高亮框样式
const highlightStyle = ref({
    borderColor: '##2C3E50',
    borderWidth: '4px',
    borderStyle: 'solid',
    backgroundColor: 'rgba(255, 107, 107, 0.1)',
    shadowColor: 'rgba(0, 0, 0, 0.7)'
});
// 自定义气泡样式
const bubbleStyle = ref({
    backgroundColor: '#fff',
    textColor: '#fff',
    titleColor: '#FFFFFF',
    boxShadow: '0 8px 16px rgba(0, 0, 0, 0.2)'
});
// 引导步骤配置
const guideSteps = ref([
    {
        selector: '#message-center',
        title: '消息中心',
        content: '这里可以查看所有的系统通知和消息提醒',
        position: 'bottom'
    },
    {
        selector: '#notification-settings',
        title: '通知设置',
        content: '自定义您想要接收的通知类型和提醒方式',
        position: 'bottom'
    },
    {
        selector: '#user-center',
        title: '个人中心',
        content: '管理您的个人信息和账户设置',
        position: 'bottom'
    },
    {
        selector: '#system-settings',
        title: '系统设置',
        content: '调整系统的全局配置和偏好设置',
        position: 'bottom'
    }
]);

// 组件引用
const guideRef = ref(null);

// 返回首页
const backToHome = () => {
    uni.navigateBack();
};

// 开始引导
const startGuide = () => {
    currentStep.value = 0;
    showGuide.value = true;
};

// 重置引导状态
const resetGuide = () => {
    if (guideRef.value) {
        guideRef.value.resetGuideStatus();
        uni.showToast({
            title: '已重置引导状态',
            icon: 'success'
        });
    }
};

// 引导完成回调
const onFinish = () => {
    uni.showToast({
        title: '引导完成',
        icon: 'success'
    });
};
</script>

<style lang="scss">
.component-page {
    padding: 30rpx;
    background-color: #f7f7f7;
    min-height: 100vh;
    box-sizing: border-box;
}

.page-header {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;

    .back-button {
        display: flex;
        align-items: center;
        padding: 10rpx 0;
        margin-right: 20rpx;

        .back-icon {
            font-size: 36rpx;
            margin-right: 6rpx;
        }
    }

    .page-title {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
    }
}

.demo-section {
    margin-bottom: 30rpx;

    .section-title {
        font-size: 30rpx;
        font-weight: bold;
        margin-bottom: 20rpx;
    }
}

.demo-container {
    background-color: #fff;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
    overflow: hidden;
    padding: 30rpx;
}

.demo-header {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;

    .back-btn {
        padding: 10rpx 0;
        margin-right: 20rpx;
    }

    .header-title {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
    }
}

.demo-content {
    background-color: #fff;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
    overflow: hidden;
    padding: 30rpx;
}

.feature-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 40rpx;

    .feature-item {
        width: 48%;
        height: 180rpx;
        background-color: #f0f5ff;
        border-radius: 16rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 20rpx;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
        transition: all 0.3s;

        &:active {
            transform: scale(0.98);
        }

        .iconfont {
            font-size: 60rpx;
            margin-bottom: 16rpx;
        }

        text {
            font-size: 28rpx;
            color: #333;
            font-weight: bold;
        }
    }
}

.control-buttons {
    display: flex;
    justify-content: center;
    gap: 30rpx;

    .control-btn {
        flex: 1;
        height: 80rpx;
        line-height: 80rpx;
        font-size: 28rpx;
        color: #fff;
        background-color: #007aff;
        border-radius: 40rpx;

        &:last-child {
            background-color: #ff9500;
        }
    }
}

.feature-intro {
    margin-top: 30rpx;
    background-color: #fff;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
    overflow: hidden;
    padding: 20rpx 30rpx;

    .intro-title {
        font-size: 30rpx;
        font-weight: bold;
        margin-bottom: 20rpx;
    }

    .intro-list {
        .intro-item {
            font-size: 26rpx;
            color: #666;
            margin-bottom: 10rpx;
        }
    }
}

.feature-list {
    background-color: #fff;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
    overflow: hidden;
    padding: 10rpx 0;

    .feature-item {
        display: flex;
        align-items: center;
        padding: 24rpx 30rpx;
        border-bottom: 1px solid #f5f5f5;

        &:last-child {
            border-bottom: none;
        }

        .feature-icon {
            width: 80rpx;
            height: 80rpx;
            border-radius: 16rpx;
            background: linear-gradient(45deg, #10B981, #6EE7B7);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40rpx;
            margin-right: 24rpx;
        }

        .feature-info {
            flex: 1;

            .feature-title {
                font-size: 30rpx;
                font-weight: bold;
                color: #333;
                margin-bottom: 6rpx;
                display: block;
            }

            .feature-desc {
                font-size: 26rpx;
                color: #666;
                display: block;
            }
        }
    }
}
</style>